<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<!-- 需求：用户全名的拼接 -->
			姓氏：<input type="text"  v-model="firstname"/><br />
			名字：<input type="text" v-model="lastname"/><br />
			全名：{{fullname}}
		</div>
		
	</body>
	<script>
		const app = new Vue({
			el:"#app",
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			// 配置监听器
			// key 被监听的属性名称 方法的结构
			// value 当监听器生效时 value就是被监听的属性的数据
			watch:{
				firstname(value){
					this.fullname=value+this.lastname
				},
				lastname(value){
					this.fullname=this.firstname+value
				}
			}
		})
	</script>
</html>
